<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style>
		input,
		button {
			margin: 10px;
			padding: 5px;
		}

		div>div>div {
			margin-bottom: 30px;
		}
	</style>
</head>

<body>

	<div id="vue-root">
		<div style="width: 200px; margin:50px auto;">
			<div>
				&nbsp; 上午离校开始时间<br>
				<input id="time1" :value="time1">
			</div>
			<div>
				&nbsp; 中午离校结束时间<br>
				&nbsp; (下午进校开始时间)<br>
				<input id="time2" :value="time2">
			</div>
			<div>
				&nbsp; 下午进校结束时间
				<input id="time3" :value="time3">
			</div>

			<div>
				<button @click="submit">提交</button>
				<button onclick="history.back()">返回</button>
			</div>
		</div>

	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>

	<script>

		var schoolId = top_params().id;

		var app = new Vue({
			el: '#vue-root',
			data: {
				time1: '11:00:00',
				time2: '13:00:00',
				time3: '15:00:00',
			},
			created: function () {
				axios.get('/pc/school/' + schoolId).then(function (res) {
					var time3 = res.data.time3;
					if (!time3) return;
					this.time1 = time3[0];
					this.time2 = time3[1];
					this.time3 = time3[2];
				}.bind(this));
			},
			methods: {
				submit: function () {
					axios.put('/pc/school', {
						id: schoolId,
						time3: [this.time1, this.time2, this.time3]
					}).then(function (res) {
						alert('成功');
						history.back();
					});
				}
			}

		});


		[1, 2, 3].forEach(function (it) {
			laydate.render({
				elem: '#time' + it,
				type: 'time',
				format: 'HH:mm:ss',
				done: function (value, date2, endDate) {
					app['time' + it] = value;
				}
			});
		})

	</script>

</body>

</html>